<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item style="font-size: 18px;">检索任务</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="任务名称">
                <el-input v-model="formInline.taskName" placeholder="任务名称"></el-input>
            </el-form-item>
            <el-form-item label="任务类型">
                <el-select v-model="formInline.taskType" placeholder="任务类型">
                    <el-option label="全部" value='2'></el-option>
                    <el-option label="文本检索" value='0'></el-option>
                    <el-option label="图像检索" value='1'></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="采集任务">
                <el-select v-model="formInline.taskId" placeholder="采集任务">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" stripe style="width: 100%;" border>
            <el-table-column prop="taskName" label="任务名称" align="center">
            </el-table-column>
            <!-- <el-table-column prop="createUser" label="创建用户" align="center">
            </el-table-column> -->
            <el-table-column prop="taskType" label="任务类型" align="center">
                <template slot-scope="scope">
                    <p v-if="scope.row.taskType == 0">文本检索任务</p>
                    <p v-if="scope.row.taskType == 1">图像检索任务</p>
                </template>
            </el-table-column>
            <el-table-column prop="collectTask" label="采集任务" align="center">
            </el-table-column>
            <el-table-column label="检索内容" align="center">
                <template #default="{ row }">
                    <span>{{ formatList(row.content) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClickView(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="handleClickDownload(scope.row)" type="text" size="small">导出</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from "axios";
export default {
    async mounted() {
        await axios.get("/api/retrievalTask/getCollectTask").then(res => {
            this.options = [{
                value: '',
                label: '全部'
            }];
            this.map = res.data.data;
            console.log("this.map");
            console.log(this.map);
            var keys = Object.keys(this.map);
            for (var i = 0; i < keys.length; i++) {
                var key = keys[i];
                var value = this.map[key];
                this.options.push({ value: key, label: value });
            }

            console.log(this.map)
        })
        await this.list();
    },
    methods: {
        async list() {
            const param = {
                params: {
                    taskName: this.formInline.taskName,
                    type: this.formInline.taskType,
                    taskId: this.formInline.taskId
                }
            };
            await axios.get("/api/retrievalTask/list", param).then(res => {
                this.tableData = res.data.data;
                for (var i = 0; i < this.tableData.length; i++) {
                    this.tableData[i]["collectTask"] = this.map[this.tableData[i]["taskId"]]
                }
            })
        },
        handleClickView(row) {
            console.log(row);
            this.$router.push({
                name: 'RetrievalView', // 目标路由的名称
                params: {
                    id: row.id,
                    taskName: row.taskName,
                    content: row.content
                } // 携带的参数对象
            });
        },
        handleClickDownload(row) {
            console.log(row)
        },
        onSubmit() {
            this.list();
        },
        formatList(list) {
            return list.join(';');
        }
    },
    data() {
        return {
            tableData: [],
            formInline: {
                taskName: '',
                taskType: '2',
                taskId: ''
            },
            options: [],
            map: {}
        }
    }
}
</script>

<style></style>